<template>
  <div class="remotePlan">
    <div class="remotePlan-title">生物资产动态历程</div>
    <div>
      <div class="processBox">
        <div class="timelineProcessBox">
          <el-timeline class="timeline">
            <el-timeline-item
              class="lineitem"
              :class="activity.done ? 'active' : 'inactive'"
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.time"
            >
              <span style="display: flex; flex-direction: column">
                <span :class="activity.done ? 'active' : 'inactive'" style="font-size: 12px">
                  {{ activity.content }}
                </span>
              </span>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
    <div class="remotePlan-show">
      <div style="width: 100%; height: 200px">
        <MyEchart :option="dataSource"></MyEchart>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, reactive, watch, computed } from 'vue'
import { getDeadOutInfo } from '@/api/api'
import MyEchart from '@/components/echarts/MyCharts2.vue'
import { useRoute } from 'vue-router'

const route = useRoute()
let xData = ref([])
let stockNum = ref([])
let deadNum = ref([])

const props = defineProps({
  fAdoptDate: {
    type: String,
    default: ''
  },
  fDelayDate: {
    type: String,
    default: ''
  }
})

const activities = computed(() => {
  return [
    {
      content: '进苗',
      time: props.fAdoptDate,
      done: props.fAdoptDate
    },
    {
      content: '上市',
      done: props.fDelayDate,
      time: props.fDelayDate
    },
    {
      content: '清栏',
      done: false
    }
  ]
})

function formatDateToMD(dateStr) {
  const date = new Date(dateStr)
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始
  const day = String(date.getDate()).padStart(2, '0')
  return `${month}/${day}`
}

// 获取死淘数据
const fetchDeadOutInfo = async () => {
  try {
    const res = await getDeadOutInfo({
      flockId: route.query.flockId
    })
    if (res && res.data) {
      let { data } = res
      data.forEach((item) => {
        xData.value.push(formatDateToMD(item.date))
        stockNum.value.push(item.stockNum)
        deadNum.value.push(item.deadNum)
      })

      dataSource = {
        tooltip: {
          trigger: 'axis'
        },
        color: ['#26B629', '#DD4A0B'],
        legend: {
          icon: 'circle',
          left: 0,
          textStyle: {
            color: '#ffffff' // 设置图例文字颜色为白色
          },
          data: ['存栏', '死淘']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xData.value
        },
        yAxis: [
          {
            type: 'value',
            splitLine: {
              lineStyle: {
                // 设置背景横线
                color: 'rgba(106, 110, 126,0.5)'
              }
            }
          }
        ],
        dataZoom: [
          //滚动条
          {
            show: true,
            type: 'slider',
            realtime: true,
            startValue: 0,
            endValue: 6,
            xAxisIndex: [0],
            bottom: '10',
            left: '30',
            height: 10,
            borderColor: 'rgba(0,0,0,0)',
            textStyle: {
              color: '#05D5FF'
            }
          }
        ],
        series: [
          {
            name: '存栏',
            symbol: 'circle',
            type: 'line',
            step: 'middle',
            data: stockNum.value
          },
          {
            name: '死淘',
            type: 'line',
            symbol: 'circle',
            step: 'middle',
            data: deadNum.value
          }
        ]
      }
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

let dataSource = reactive({
  title: {
    text: '暂无数据',
    x: 'center',
    y: 'center',
    textStyle: {
      fontSize: 14,
      fontWeight: 'normal'
    }
  }
})

onMounted(() => {
  fetchDeadOutInfo()
})
</script>

<style scoped lang="scss">
.remotePlan {
  &-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
  }

  &-show {
    padding: 10px;
  }
}

.processBox {
  height: 80px;

  .timelineProcessBox {
    .timeline {
      display: flex;
      width: 95%;
      margin: 40px auto;

      .lineitem {
        transform: translateX(50%);
        width: 30%;
      }
    }
  }
}

:deep(.el-timeline-item__tail) {
  border-left: none;
  border-top: 2px solid #e4e7ed;
  width: 100%;
  position: absolute;
  top: 6px;
}

:deep(.el-timeline-item__wrapper) {
  padding-left: 0;
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  text-align: center;
}

:deep(.el-timeline-item__timestamp) {
  font-size: 12px;
}

.active {
  color: #64b6f2;

  :deep(.el-timeline-item__node) {
    background-color: #64b6f2;
  }

  :deep(.el-timeline-item__tail) {
    border-color: #64b6f2;
  }
}

// 有active样式的下一个li
// .active + li {
//   :deep(.el-timeline-item__node) {
//     background-color: #64b6f2;
//   }
// }
</style>
